import React, { memo, useState, useRef, useEffect } from "react";
import { LoginWayOneWrap } from "./style";
import { eqCordGetKey, eqCordCreate, eqCordCheck } from "@/services/login";
import WaitCode from "@/components/loginCop/waitCode";
import { setLocalStroage } from "@/utils/localStorage";

export default memo(function LoginWayOne(props) {
  const [loginEqImg, setLoginEqImg] = useState("");
  const codeId = useRef(0);
  const zzboxRef = useRef("none"); //二维码的Ref
  const timer = useRef(null);
  const modalRef = useRef(0);
  const waitCodeRef = useRef(0);

  // 刷新二维码
  const reFrestRequest = () => {
    timer.current = null;
    zzboxRef.current.style.display = "none";
    getSetIntervalRequest();
  };

  // 设置失效
  let inFifteenMinutes = new Date(new Date().getTime() + 24 * 3600 * 1000); //一天
  // 刷新状态
  const getSetIntervalRequest = async () => {
    const loginKeya = await eqCordGetKey();
    const loginEqUrl = await eqCordCreate(
      loginKeya.data.unikey,
      loginKeya.data.unikey
    );
    const loginEqCheck = await eqCordCheck(loginKeya.data.unikey);

    timer.current = setInterval(async () => {
      codeId.current = await eqCordCheck(loginKeya.data.unikey);
      if (codeId.current.code === 800) {
        props.setStatusFunc(1);
        clearInterval(timer.current);
        timer.current = null;
        modalRef.current.style.display = "block";
        waitCodeRef.current.style.display = "none";
        zzboxRef.current.style.display = "block"; //刷新的ref
      } else if (codeId.current.code === 802) {
        modalRef.current.style.display = "none";
        waitCodeRef.current.style.display = "block";
      } else if (codeId.current.code === 803) {
        const cookieText = codeId.current.cookie;
        setLocalStroage("cookie", cookieText, 2);
        window.location.reload();
      }
    }, 3000);

    if (loginEqCheck !== "") {
      setLoginEqImg(loginEqUrl.data.qrimg);
    }
  };

  useEffect(() => {
    if (props.closeW === 1) {
      getSetIntervalRequest();
    }
    if (props.closeW === 0) {
      clearInterval(timer.current);
      timer.current = null;
      props.closeLogin();
    }
  }, [props.closeW]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <LoginWayOneWrap id="loginWay">
      <div ref={modalRef}>
        <div className="modal-box-ewm-sm"></div>
        <div className="modal-box-qr-box">
          <p className="qr-title">扫码登录</p>
          <div className="login-zz-box">
            <img src={loginEqImg} alt="" />
            <div ref={zzboxRef} className="zz-box">
              <p>二维码失效</p>
              <a onClick={reFrestRequest} className="fresh">
                点击刷新
              </a>
            </div>
          </div>
          <p className="qr-tip">
            使用<a className="our-appmusic">网易云音乐APP</a>扫码登录
          </p>
        </div>
      </div>

      <div className="waitCode" ref={waitCodeRef}>
        <WaitCode />
      </div>
      <div onClick={props.changeWayLogin} className="checkLoginWay">
        选择其他登录模式
      </div>
    </LoginWayOneWrap>
  );
});
